<template>
	<view>
		<!-- 模糊背景 -->
		<view class="topic-bg">
			<image src="/static/img/header/a.svg" mode="aspectFill"></image>
		</view>
		<!-- 话题信息 -->
		<view class="topic-info px-20">
			<view class="topic-info-t flex-row a-center">
				<image src="/static/img/header/a.svg" mode=""></image>
				<view class="">#生死看淡，不服就干#</view>
			</view>
			<view class="topic-info-c flex-row a-center py-20">
				<view class="">动态 1000</view>
				<view class="">今日 888</view>
			</view>
			<view class="topic-info-b pb-10">
				我是描述
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.topic-bg {
	width: 100%;
	height: 300rpx;
	position: relative;
	overflow: hidden;
	image {
		width: 100%;
		position: absolute;
		filter: blur(10px);
	}
}
.topic-info {
	position: relative;
	.topic-info-t > image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		position: absolute;
		top: -75rpx;
	}
	.topic-info-t > view {
		font-size: 35rpx;
		margin-left: 150rpx;
		flex: 1;
	}
	.topic-info-c > view {
		color: map-get($text-color,color3);
	}
	.topic-info-b {
		color: map-get($text-color,color2);
		font-size: 32rpx;
	}
}
</style>
